<template>
  <div class="childer">
    <div class="content" v-if="parent">
      <parentcommmet v-if="parent.parent" :parent="parent.parent" />
      <div class="height">
        <div>{{ parent.account.nickname }}</div>
        <div class="date">{{ parent.created_at | dateForm }}</div>
      </div>
      <div class="footer">
        <div>{{ parent.content }}</div>
        <div v-if="parent.pics">
          <div class="img" v-for="(v, i) in parent.pics" :key="i">
            <img :src="$axios.defaults.baseURL + v.url" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
export default {
  name: "parentcommmet",
  props: ["parent"],

  // 处理过滤时间
  filters: {
    dateForm(el) {
      return moment(el).format("YYYY-MM-DD HH:mm");
    },
  },
};
</script>
<style lang="less" scoped>
.content {
  border: 1px solid #ccc;
  background-color: #eee;
  padding: 5px;
}
.height {
  display: flex;
  font-size: 14px;
  padding: 10px 0;
  .date {
    font-size: 12px;
    margin: 0 10px;
  }
}
.footer {
  font-size: 14px;
  .img {
    width: 80px;
    height: 80px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>